<template>
  <div class="grammar">
    <v-header>
      <div slot="collect" @click="toggleCollect">
        <img :src="isFavorite ? Favorited : Favorite" alt="" />
      </div>
      <div slot="note" @click="shownote = true">添加笔记</div>
      <div slot="up" @click="submit" v-show="!showAnswer">提交</div>
    </v-header>

    <div class="match-con">
      <p class="con-tit">语法训练</p>
      <div class="des">
        <div class="des-tit">题干,描述</div>
        <p class="des-txt">{{ describe }}</p>
      </div>
      <div class="des-tip">大题内容</div>

      <div class="list-box">
        <div class="list-item" v-for="(item, index) in options" :key="index">
          <div style="margin-bottom: 10px">
            {{ index + 1 }}. {{ item.title }}
          </div>

          <el-input v-if="!showAnswer" v-model="form[item.value]" clearable placeholder="请输入答案"></el-input>
          <el-input v-else v-model="yufaAnswer[item.value]" disabled placeholder="请输入答案"></el-input>
        </div>
      </div>

      <!-- <div class="analyse" v-show="showAnswer">
        <p>答案解析:</p>
        <div class="detail" v-for="(item, index) in answer" :key="index">
          ({{ index + 1 }}) {{ item }}
        </div>
      </div> -->
    </div>

    <!-- 添加笔记 -->
    <van-dialog
      v-model="shownote"
      title="复习笔记"
      show-cancel-button
      confirm-button-text="保存"
      :beforeClose="noteBtn"
    >
      <textarea v-model="message" placeholder="要记点什么吗"></textarea>
    </van-dialog>
  </div>
</template>

<script>
import header from "@/components/content/header";
import { Toast, Dialog } from "vant";
import { mapGetters } from "vuex";

export default {
  name: "grammar",
  components: {
    "v-header": header,
    [Toast.name]: Toast,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      isFavorite: false, // 是否已收藏
      Favorite: require("@/assets/collect.png"),
      Favorited: require("@/assets/collected.png"),
      prevRoute: "",
      message: "",
      //题干 描述
      describe:
        "Directions: There are 5 incomplete statements here. You should fill in each blank with the proper form of the word given in brackets. Write the word or words in the corresponding space on the Answer Sheet.",
      shownote: false,
      form: {},
      options: [
        {
          value: "value1",
          title:
            "For the sake of our long-term (cooperate) (1) ________ ,we may consider reducing the price by 10 per cent.",
          detail:
            "本题考査动词和名词的转化。空格前的our long-term是定语成分，表明空格应为名词。cooperate是动词，可通过在其后加上后缀-tion ，变成适合本题要求的名词cooperation。",
        },
        {
          value: "value2",
          title:
            "Here you will find some (value) (2) ________ resources to help you develop communication skills.",
          detail: "本题考査动词和名词的转化。空格前的our long-term是",
        },
        {
          value: "value3",
          title:
            "Driving has long been thought of as (efficient) (3) ________ than flying, but according to new research, that is no longer the case.",
          detail: "本题考査动词和名词的转化。空格前的our long-term是",
        },
        {
          value: "value4",
          title:
            "Quotations and samples will (send) (4) ________ to you as soon as we receive your specific inquiries.",
          detail: "本题考査动词和名词的转化。空格前的our long-term是",
        },
        {
          value: "value5",
          title:
            "After (receive) (5) ________ your loan from us, if you are not completely satisfied with your experience, please contact us.",
          detail: "本题考査动词和名词的转化。空格前的our long-term是",
        },
      ],
    };
  },
  created() {
    this.getMatch()
  },
  computed: {
    ...mapGetters(["showAnswer", "yufaAnswer"]),
  },
  beforeRouteEnter(to, from, next) {
    // console.log(from)
    next((vm) => {
      vm.geturl(from.name);
    });
  },
  methods: {
    getMatch() {
      // 动态计算v-model的长度
      let len = this.options.length;
      for (let i = 0; i < len; i++) {
        let items = this.options[i];
        this.$set(this.form, items.value, "");
      }
    },

    // 收藏    没写返回数据给后台
    toggleCollect() {
      if (this.isFavorite) {
        this.isFavorite = false;
        Toast("取消收藏");
      } else {
        this.isFavorite = true;
        Toast("收藏成功");
      }
    },

    // 添加笔记
    noteBtn(action, done) {
      if (action === "cancel") {
        this.shownote = false;
        done();
      } else if (action === "confirm") {
        if (!this.message) {
          Toast("请输入笔记,再保存");
          done(false);
        } else {
          console.log("语法训练笔记:", this.message);
          this.shownote = false;
          this.message = "";
          done();
        }
      }
    },

    // 提交
    submit() {
      Dialog.confirm({ message: "是否提交试题?" })
        .then(() => {
          Toast.success("提交成功");
          setTimeout(() => {
            console.log("语法训练", this.form);
            this.$store.dispatch("yufaAnswer", this.form);
            this.$router.push({ path: "/home/reportyufa" });
          }, 2000);
        })
        .catch(() => {
          // 取消
        });
    },

    geturl(url) {
      this.prevRoute = url;
      // console.log(this.prevRoute)
      if (url == "grammartype") {
        this.$store.dispatch("showAnswer", false);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.match-con {
  margin: 5px 0 40px;
  padding: 10px;
  .con-tit {
    font-size: 16px;
    color: #333;
    line-height: 24px;
    margin: 0;
  }
}
.des {
  padding: 6px;
  border: 1px dashed #bbbbbe;
  color: #666;
  margin: 5px 0;
  .des-tit {
    font-size: 14px;
    line-height: 20px;
  }
  .des-txt {
    font-size: 12px;
    text-align: justify;
    line-height: 16px;
  }
}
.des-tip {
  font-size: 16px;
  color: #3291f8;
  line-height: 24px;
}
.list-box {
  margin-top: 20px;
  .list-item {
    font-size: 16px;
    text-align: justify;
    line-height: 24px;
    color: #323232;
    margin-bottom: 20px;
  }
}
.analyse {
  font-size: 16px;
  color: #333;
  margin-top: 20px;
  .detail {
    text-align: justify;
    line-height: 24px;
    margin: 15px 0;
  }
}
textarea {
  font-size: 14px;
  width: 100%;
  white-space: pre-wrap;
  display: block;
  width: 100%;
  height: 100%;
  text-align: justify;
  box-sizing: border-box;
  border: 0;
  resize: none;
  line-height: 24px;
  padding: 10px 10px 10px 20px;
  color: #323232;
  height: 150px;
}
</style>
